<template>
    <!-- 主内容区域 -->
    <div class="main-container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h2 class="page-title">课程修改</h2>
        </div>

        <!-- 操作栏 -->
        <div class="toolbar">
            <div class="toolbar-left">
                <el-button type="primary" @click="openadd">
                    <i class="el-icon-plus"></i>创建
                </el-button>
            </div>

            <div class="toolbar-right">
                <el-input v-model="courseName" placeholder="课程名" class="search-input" clearable>
                </el-input>
                <el-input v-model="studentName" placeholder="学生名" class="search-input" clearable>
                </el-input>
                <el-input v-model="className" placeholder="班级名" class="search-input" clearable>
                </el-input>
                <el-button type="primary" @click="search">搜索</el-button>
            </div>
        </div>
        <!-- 分页 -->
        <el-pagination :current-page="page" @current-change="handlechange" background layout="prev, pager, next"
            :total="total" style="text-align: center;">
        </el-pagination>
        <!-- 数据表格 -->

        <template>
            <el-table :data="tableData" style="width: 100%" max-height="500" v-loading="loading">
                <el-table-column prop="id" label="选课ID" width="150" align="center">
                </el-table-column>
                <el-table-column prop="courseName" label="课程名称" width="150" align="center">
                </el-table-column>
                <el-table-column prop="studentName" label="学生名" width="150" align="center">
                </el-table-column>
                <el-table-column prop="className" label="学生班级" width="150" align="center">
                </el-table-column>
                <el-table-column prop="dailyScore" label="日常分" width="150" align="center">
                </el-table-column>
                <el-table-column prop="examScore" label="期末分" width="150" align="center">
                </el-table-column>
                <el-table-column prop="score" label="总分" width="150" align="center">
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" @click="openedit(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>



        <!-- 添加对话框 -->
        <el-dialog width="500px" :visible.sync="isAdd" title="添加" :close-on-click-modal="false">
            <add @close="isAdd = false" :key="isAdd" @done="handdone"></add>
        </el-dialog>

        <!-- 编辑 -->
        <el-dialog width="500px" :visible.sync="isEdit" title="编辑" :close-on-click-modal="false">
            <edit @close="isEdit = false" :key="isEdit" @done="handdone" :id="currentId"></edit>
        </el-dialog>
    </div>
</template>

<script>
import { studentcoursepagecount, studentcoursepage, studentdel } from '@/api/courseup';
import edit from "./components/edit.vue"
import add from "./components/add.vue"
export default {
    components: {
        add: add,
        edit: edit
    },
    data() {
        return {
            tableData: [],
            total: 0,
            studentName: '',
            className: '',
            courseName: '',
            loading: false,
            page: 1,
            isAdd: false,
            isEdit: false,
            currentId: null,
        }
    },
    methods: {
        async getList() {
            const params = {
                studentName: this.studentName,
                className: this.className,
                courseName: this.courseName,
            };
            this.loading = true;
            let ret1 = await studentcoursepagecount(params);
            console.log(ret1);
            this.total = ret1.data * 10;
            if (ret1.code == 0) {
                let ret2 = await studentcoursepage(params, this.page);
                console.log(ret2);
                this.tableData = ret2.data;
            };
            this.loading = false;
        },
        search() {
            this.page = 1;
            this.getList()
        },
        handlechange(val) {
            console.log(val);
            this.page = val;
            this.getList()
        },
        openadd() {
            this.isAdd = true;
        },
        openedit(id) {
            this.isEdit = true;
            this.currentId = id;
        },
        handdone() {
            this.isAdd = false;
            this.isEdit = false;
            this.getList();
        },
        async del(id) {
            console.log(id);
            this.$confirm('确定要删除该系吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 调用删除接口
                const res = await studentdel(id);
                if (res.code === 0) {
                    this.$message.success('删除成功');
                    this.getList(); // 刷新列表
                } else {
                    this.$message.error(res.msg || '删除失败');
                }
            }).catch(() => {
                
            })
        },
    },
    mounted() {
        this.getList()
    }
}
</script>

<style scoped>
.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: white;
}

.page-header {
    padding: 20px 24px 0;
    background: white;
}

.page-title {
    font-size: 20px;
    color: #303133;
    margin: 0;
    font-weight: 500;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: white;
    border-bottom: 1px solid #ebeef5;
}

.toolbar-left {
    display: flex;
    gap: 10px;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-input {
    width: 120px;
}

.table-container {
    flex: 1;
    padding: 0 24px;
    overflow-y: auto;
}

.data-table {
    margin-top: 20px;
}

:deep(.data-table .el-table__header-wrapper) {
    background: #fafafa;
}

:deep(.data-table .el-table__header th) {
    background: #fafafa;
    color: #606266;
    font-weight: 500;
}

.pagination-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: white;
    border-top: 1px solid #ebeef5;
}

:deep(.el-pagination) {
    justify-content: center;
}
</style>